<!DOCTYPE html>


  <html class="light page-post">


<head>
  <meta charset="utf-8">
  
  <title>Vue-cli 开启sass编译 | watermeLonMan frontEnd 前端 javascript js node vue php</title>

  <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">

  
    <meta name="keywords" content="vue vue-cli sass node 前端 npm," />
  

  <meta name="description" content="在使用vue-cli脚手架工具生成的模板项目中，有时候需要编写sass，但是vue-cli生成模板时，并没有默认配置。因此就需要我们自己简单配置下

首先需要安装一些依赖文件1npm install node-sass sass-loader --save-dev


安装两个依赖文件
安装node-sass经常会遇到失败的情况，这是由于被墙的原因解决办法有两点1.全局安装淘宝的npm源
12np">
<meta property="og:type" content="article">
<meta property="og:title" content="Vue-cli 开启sass编译">
<meta property="og:url" content="http://git.oschina.net/WatermeLonMan/2016/12/12/vue/index.html">
<meta property="og:site_name" content="watermeLonMan frontEnd 前端 javascript js node vue php">
<meta property="og:description" content="在使用vue-cli脚手架工具生成的模板项目中，有时候需要编写sass，但是vue-cli生成模板时，并没有默认配置。因此就需要我们自己简单配置下

首先需要安装一些依赖文件1npm install node-sass sass-loader --save-dev


安装两个依赖文件
安装node-sass经常会遇到失败的情况，这是由于被墙的原因解决办法有两点1.全局安装淘宝的npm源
12np">
<meta property="og:updated_time" content="2017-04-12T15:34:34.000Z">
<meta name="twitter:card" content="summary">
<meta name="twitter:title" content="Vue-cli 开启sass编译">
<meta name="twitter:description" content="在使用vue-cli脚手架工具生成的模板项目中，有时候需要编写sass，但是vue-cli生成模板时，并没有默认配置。因此就需要我们自己简单配置下

首先需要安装一些依赖文件1npm install node-sass sass-loader --save-dev


安装两个依赖文件
安装node-sass经常会遇到失败的情况，这是由于被墙的原因解决办法有两点1.全局安装淘宝的npm源
12np">

  

  
    <link rel="icon" href="/images/favicon.ico">
  

  <link href="/css/styles.css?v=c114cbe6" rel="stylesheet">


  
    <link rel="stylesheet" href="/css/person_style.css">
  

  
<!-- Google Analytics -->
<script type="text/javascript">
(function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
(i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
})(window,document,'script','//www.google-analytics.com/analytics.js','ga');

ga('create', 'UA-97407478-1', 'auto');
ga('send', 'pageview');

</script>
<!-- End Google Analytics -->


  
  <script type="text/javascript">
    var _hmt = _hmt || [];
    (function() {
      var hm = document.createElement("script");
      hm.src = "//hm.baidu.com/hm.js?0dfdf78e5f8c57b73f38865645af83e8";
      var s = document.getElementsByTagName("script")[0];
      s.parentNode.insertBefore(hm, s);
    })();
  </script>


  
  <script type="text/javascript">
	(function(){
	    var bp = document.createElement('script');
	    var curProtocol = window.location.protocol.split(':')[0];
	    if (curProtocol === 'https') {
	        bp.src = 'https://zz.bdstatic.com/linksubmit/push.js';        
	    }
	    else {
	        bp.src = 'http://push.zhanzhang.baidu.com/push.js';
	    }
	    var s = document.getElementsByTagName("script")[0];
	    s.parentNode.insertBefore(bp, s);
	})();
  </script>



  

  
</head>

<body>


  
    <span id="toolbox-mobile" class="toolbox-mobile">more</span>
  

  <div class="post-header CENTER">
   
  <div class="toolbox">
    <a class="toolbox-entry" href="/">
      <span class="toolbox-entry-text">more</span>
      <i class="icon-angle-down"></i>
      <i class="icon-home"></i>
    </a>
    <ul class="list-toolbox">
      
        <li class="item-toolbox">
          <a
            class="CIRCLE"
            href="/archives/"
            rel="noopener noreferrer"
            target="_self"
            >
            博客
          </a>
        </li>
      
        <li class="item-toolbox">
          <a
            class="CIRCLE"
            href="/category/"
            rel="noopener noreferrer"
            target="_self"
            >
            分类
          </a>
        </li>
      
        <li class="item-toolbox">
          <a
            class="CIRCLE"
            href="/tag/"
            rel="noopener noreferrer"
            target="_self"
            >
            标签
          </a>
        </li>
      
        <li class="item-toolbox">
          <a
            class="CIRCLE"
            href="/about/"
            rel="noopener noreferrer"
            target="_self"
            >
            关于
          </a>
        </li>
      
    </ul>
  </div>


</div>




<div class="content content-post CENTER">
   <article id="post-vue" class="article article-type-post" itemprop="blogPost">
  <header class="article-header">
    <h1 class="post-title">Vue-cli 开启sass编译</h1>

    <div class="article-meta">
      <span>
        <i class="icon-calendar"></i>
        <span>2016.12.12</span>
      </span>

      
        <span class="article-author">
          <i class="icon-user"></i>
          <span>watermeLonMan</span>
        </span>
      

      


      

      

      
      
    </div>
  </header>

  <div class="article-content">
    
      <p>在使用vue-cli脚手架工具生成的模板项目中，有时候需要编写sass，但是vue-cli生成模板时，并没有默认配置。<br>因此就需要我们自己简单配置下</p>
<ul>
<li>首先需要安装一些依赖文件<figure class="highlight plain"><table><tr><td class="gutter"><pre><div class="line">1</div></pre></td><td class="code"><pre><div class="line">npm install node-sass sass-loader --save-dev</div></pre></td></tr></table></figure>
</li>
</ul>
<p>安装两个依赖文件</p>
<p>安装node-sass经常会遇到失败的情况，这是由于被墙的原因<br>解决办法有两点<br>1.全局安装淘宝的npm源</p>
<figure class="highlight plain"><table><tr><td class="gutter"><pre><div class="line">1</div><div class="line">2</div></pre></td><td class="code"><pre><div class="line">npm install -g cnpm --registry=https://registry.npm.taobao.org</div><div class="line">cnpm install node-sass sass-loader --save-dev  #开始安装</div></pre></td></tr></table></figure>
<p>2.在当前项目目录下新建名为 .npmrc 的文件，内容为<br><figure class="highlight plain"><table><tr><td class="gutter"><pre><div class="line">1</div></pre></td><td class="code"><pre><div class="line">SASS_BINARY_SITE=https://npm.taobao.org/mirrors/node-sass/</div></pre></td></tr></table></figure></p>
<p>意为将sass的二进制文件镜像指为淘宝镜像</p>
<p>以上依赖安装好之后，在实际项目中编写时候，需要写成如下形式进行引用<br><figure class="highlight plain"><table><tr><td class="gutter"><pre><div class="line">1</div><div class="line">2</div><div class="line">3</div></pre></td><td class="code"><pre><div class="line">&lt;style lang=&apos;sass&apos;&gt;</div><div class="line">@import &apos;/src/...&apos;</div><div class="line">&lt;/style&gt;</div></pre></td></tr></table></figure></p>

    
  </div>
</article>


   

   
  <div class="box-prev-next clearfix">
    <a class="show pull-left" href="/2016/12/06/express/">
        <i class="icon icon-angle-left"></i>
    </a>
    <a class="hide pull-right" href="/">
        <i class="icon icon-angle-right"></i>
    </a>
  </div>




</div>


  <a id="backTop" class="back-top">
    <i class="icon-angle-up"></i>
  </a>




  <div class="modal" id="modal">
  <span id="cover" class="cover hide"></span>
  <div id="modal-dialog" class="modal-dialog hide-dialog">
    <div class="modal-header">
      <span id="close" class="btn-close">关闭</span>
    </div>
    <hr>
    <div class="modal-body">
      <ul class="list-toolbox">
        
          <li class="item-toolbox">
            <a
              class="CIRCLE"
              href="/archives/"
              rel="noopener noreferrer"
              target="_self"
              >
              博客
            </a>
          </li>
        
          <li class="item-toolbox">
            <a
              class="CIRCLE"
              href="/category/"
              rel="noopener noreferrer"
              target="_self"
              >
              分类
            </a>
          </li>
        
          <li class="item-toolbox">
            <a
              class="CIRCLE"
              href="/tag/"
              rel="noopener noreferrer"
              target="_self"
              >
              标签
            </a>
          </li>
        
          <li class="item-toolbox">
            <a
              class="CIRCLE"
              href="/about/"
              rel="noopener noreferrer"
              target="_self"
              >
              关于
            </a>
          </li>
        
      </ul>

    </div>
  </div>
</div>



  
      <div class="fexo-comments comments-post">
    

    




    

  </div>

  

  <script type="text/javascript">
  function loadScript(url, callback) {
    var script = document.createElement('script')
    script.type = 'text/javascript';

    if (script.readyState) { //IE
      script.onreadystatechange = function() {
        if (script.readyState == 'loaded' ||
          script.readyState == 'complete') {
          script.onreadystatechange = null;
          callback();
        }
      };
    } else { //Others
      script.onload = function() {
        callback();
      };
    }

    script.src = url;
    document.getElementsByTagName('head')[0].appendChild(script);
  }

  window.onload = function() {
    loadScript('/js/bundle.js?235683', function() {
      // load success
    });
  }
</script>

</body>
</html>
